<template>
  <view :class="['bottom-to-next', toCircle? 'to-circle' : '']" @click="changeNext">
    <view class="next-text">点击跳到“{{ nextText }}” </view>
    <view class="icon-box">
      <i class="iconfont icon-arrow-down"></i>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    nextText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      toCircle: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.toCircle = true;
    }, 3500);
  },
  methods: {
    // 点击切换下一分类
    changeNext() {
      this.$emit("changeNext");
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom-to-next {
  width: 80rpx;
  height: 80rpx;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #e0e0e0;
  border-radius: 40rpx;
  position: fixed;
  right: 24rpx;
  bottom: calc(env(safe-area-inset-bottom) + 150rpx);
  z-index: 1111;
  display: flex;
  align-items: center;
  overflow: hidden;
  animation: fullWidth 0.5s 0.3s forwards;
  @keyframes fullWidth {
    0% {
      width: 80rpx;
    }
    100% {
      width: 376rpx;
    }
  }
  .icon-box {
    width: 80rpx;
    height: 80rpx;
    background: #ffffff;
    // border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -2px;
    top: 0;
    .iconfont {
      color: #262626;
      font-size: 48rpx;
    }
  }
  .next-text {
    width: 376rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #262626;
    // padding: 0 40rpx;
    position: absolute;
    left: 376rpx;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 40rpx;
    animation: showText 0.5s 0.3s forwards;
  }
  @keyframes showText {
    0% {
      left: 376rpx;
    }
    100% {
      left: 0;
    }
  }
}
.circle {
  width: 80rpx;
}
.to-circle{
  animation: toCircle 0.5s forwards;
  @keyframes toCircle {
    0% {
      width: 376rpx;
    }
    100% {
      width: 80rpx;
    }
  }
}
</style>